    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="mi.css">
    </head>
    <body><!--199010110罗浩然-->
        <div id="app">
        <div class="head">
            <p>手机</p>
            <span><a href="#">查看更多>></a></span>
        </div><!--导航-->
            <div class="clear"></div>
            <div class="goods">
            <div class="ad1">
                <img src="ad1.png">
            </div><!--广告-->

            <div class="nr"><!--产品-->
                <div id="box">
                    <ul>
                        <li v-for="good in phoneList">
                            <img v-bind:src="good.img" width="160" height="160">
                            <h5>
                                {{good.title}}
                            </h5>
                            <h5>
                                {{good.des}}
                            </h5>
                            <h5>
                                <span style="color:red;">
                                    {{good.price}}
                                </span>
                            </h5>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        </div>
        <script src="https://unpkg.com/vue@next"></script>
        <script>
            const app = Vue.createApp({
                data(){
                    return{
                        phoneList:[{
                        id:'001',
                        img:'phone1.png',
                        title:'Redmi K50电竞版1',
                        des:'全线拉满的冷血旗舰',
                        price:'3299元起',
                        },
                    {
                        id:'002',
                        img:'phone2.png',
                        title:'Xiaomi 12 Pro',
                        des:'全新骁龙8  | 2K AMOLED屏幕',
                        price:'4699元起',
                    },
                    {
                        id:'003',
                        img:'phone3.png',
                        title:'Xiaomi 12',
                        des:'全新骁龙8  | 5000万主摄',
                        price:'3699元起',
                    },
                    {
                        id:'004',
                        img:'phone4.png',
                        title:'Xiaomi 12X',
                        des:'骁龙870  | 5000万主摄',
                        price:'2999元起',
                    },
                    {
                        id:'005',
                        img:'phone5.png',
                        title:'Xiaomi 11 青春活力版',
                        des:'轻薄5G,内外皆出彩',
                        price:'1899元起',
                    },
                    {
                        id:'006',
                        img:'phone6.png',
                        title:'Redmi Note 11 Pro系列',
                        des:'三星AMOLED高刷屏',
                        price:'1799元起',
                    },
                    {
                        id:'007',
                        img:'phone7.png',
                        title:'Redmi Note 11 5G',
                        des:'5000mAh大电量',
                        price:'1199元起',
                    },
                    {
                        id:'008',
                        img:'phone8.png',
                        title:'Redmi Note 11 4G',
                        des:'5000mAh大电量',
                        price:'969元起',
                    }
                ]
                    }
                }
            }).mount('#app');
            </script>
    </body>
    </html>